import styled from "styled-components";

const Wrapper = styled.div`
    .ant-drawer .ant-drawer-body {
        padding: 0;
    }

    .ant-drawer .ant-collapse-header {
        padding: 12px;
    }

    .ant-drawer .ant-collapse-header-text {
        font-size: 16px;
    }

    .avatar-item:hover {
        background-color: #e8f0ff !important;
    }


    .figure {
        display: flex;
        align-items: center;
    }

    .figure .head {
        display: block;
        width: 48px;
        height: 48px;
        margin-right: 16px;
        margin-bottom: 12px;
        border-radius: 50%;
    }

    .container {
        height: 64px;
        width: 100%;
        margin-bottom: 12px;
        box-shadow: 0 0 10px #ccc;
        justify-content: space-between;
        position: fixed;
        background-color: #fff;
        z-index: 999;
        top: 0;
        left: 0;
        padding: 0 28px;
        min-width: 900px;
        flex-flow: row nowrap;
    }

    .drawer .logo {
        display: block;
        margin: 0 auto;
        height: 24px;
    }

    .drawer .drawer-item {
        cursor: pointer;
        padding: 0 12px !important;
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        font-weight: 500;
        color: #1f2023;
    }

    .drawer .drawer-item:hover {
        background-color: #ecf3fe;
    }

    :focus {
        outline: none;
    }

    .nav {
        margin-left: 42px;
    }

    .nav .first, .task, .bell, .avatar, .menu {
        cursor: pointer;
    }

    .right .avatar {
        position: relative;
    }

    .right .avatar .menu {
        position: absolute;
        z-index: 2021;
        top: 40px;
        left: -84px;
        margin-top: 12px;
        background: #fff;
        min-width: 250px;
        border: 1px solid #ebeef5;
        padding: 12px;
        color: #606266;
        line-height: 1.4;
        text-align: justify;
        font-size: 14px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        word-break: break-all;
        border-radius: 4px;
    }

    .right .avatar .menu::before {
        content: '';
        position: absolute;
        top: -16px;
        left: 42%;
        margin-left: -8px;
        border-width: 8px;
        border-top-width: 0;
        border-bottom-color: #fff;
    }

    .right-outline {
        margin: 0 6px;
    }

    .task, .bell {
        margin-right: 12px;
    }

    .task img, .bell img {
        width: 20px;
        height: 20px;
    }

`;
export default Wrapper;